import {messages} from "share/common";
import React, {Component} from 'react'
import {connect} from 'react-redux'
import menuRoute from 'routes/menuRoute'
import SearchArea from 'components/search-area'
import baseService from 'share/base.service'
import { Button, Badge, Divider, message, Popconfirm, Popover } from 'antd'
import ResizeTable from 'components/resize-table'
import budgetBalanceSolutionService from 'containers/budget-setting/budget-balance-solution/budget-balance-solution.service'

class BudgetBalanceSolution extends Component {
  /**
   * 构造函数
   */
  constructor(props) {
    super(props);
    this.state =
      {
        searchForm: [
          {
            type: 'select',
            id: 'setOfBooksId',
            label: messages('budget-setting.key1'/*帐套*/),
            options: [],
            isRequired: 'true',
            labelKey: 'name',
            valueKey: 'id',
            defaultValue: Number(this.props.params.setOfBooksId) ? this.props.params.setOfBooksId : this.props.company.setOfBooksId,
            event: 'SETOFBOOKSID'
          },
          {type: 'input', id: 'conditionCode', label: messages('budget-setting.key2'/*方案代码*/)},
          {type: 'input', id: 'conditionName', label: messages('budget-setting.key3'/*方案名称*/)}
        ],
        setOfBooksId: Number(this.props.params.setOfBooksId) ? this.props.params.setOfBooksId : this.props.company.setOfBooksId,
        pagination: {
          total: 0
        },
        columns: [
          {title: messages('budget-setting.key2'/*方案代码*/), dataIndex: 'conditionCode', width: '35%', render: value =>
            <Popover content={value}>{value}</Popover>},
          {title: messages('budget-setting.key3'/*方案名称*/), dataIndex: 'conditionName', width: '35%', render: value =>
            <Popover content={value}>{value}</Popover>},
          {title: messages('common.column.status'), dataIndex: 'isEnabled', width: '15%', render: value => (
            <Badge status={value ? 'success' : 'error'}
                   text={value ? messages('common.status.enable') : messages('common.status.disable')}/>
          )},
          {title: messages('common.operation'), dataIndex: 'operation', width: '15%', render: (value, record) => (
            <div>
              <a onClick={e => this.onEditClick(e, record)}>{messages('common.edit')}</a>
              <Divider type='vertical'/>
              <Popconfirm onConfirm={e => this.onDeleteClick(e, record)}
                          title={messages('common.confirm.delete')/*确定要删除吗？*/}>
                <a onClick={e => {e.preventDefault();e.stopPropagation();}}>{messages("common.delete")}</a>
              </Popconfirm>
            </div>
          )}
        ],
        data: [],
        loading: true,
        //新建预算余额查询方案
        newBudgetBalanceSolution: menuRoute.getRouteItem('new-budget-balance-solution', 'key'),
        page: 0,
        pageSize: 10,
        searchParam: {
          conditionCode: '',
          conditionName: ''
        }
      };
  }

  /**
   * 点击编辑按钮
   */
  onEditClick = (e, record) => {
    e.preventDefault();
    e.stopPropagation();
    this.context.router.push(this.state.newBudgetBalanceSolution.url.replace(':setOfBooksId', this.state.setOfBooksId).replace(':id', record.id));
  }
  /**
   * 删除某一行数据
   */
  onDeleteClick = (e, record) => {
    e.preventDefault();
    e.stopPropagation();
    budgetBalanceSolutionService.deleteBudgetBalanceSolution(record.id).then(res => {
      if (res.status === 200) {
        message.success(messages('common.delete.success', {name: ''}));
        this.getList();
      }
    }).catch(e => {
      if (e.response) {
        message.error(`${messages('common.operate.filed')}:${e.response.data.message}`);
      }
    });
  }
  /**
   * 生命周期函数constructor之后render之前加载
   */
  componentWillMount = () => {
    this.getCompanyList();
    this.getList();
  }
  /**
   * 获取预算余额查询方案list
   */
  getList = () => {
    let params = {
      page: this.state.page,
      size: this.state.pageSize,
      conditionCode: this.state.searchParam.conditionCode,
      conditionName: this.state.searchParam.conditionName
    };
    budgetBalanceSolutionService.getBudgetBalanceSolution(this.state.setOfBooksId, params).then(res => {
      this.setState({
        loading: false,
        data: res.data,
        pagination: {
          total: Number(res.headers['x-total-count'] ? Number(res.headers['x-total-count']) : 0),
          onChange: this.onChangePaper,
          current: this.state.page + 1
        }
      });
    });
  }
  /**
   * 切换分页
   */
  onChangePaper = (page) => {
    if (page - 1 !== this.state.page) {
      this.setState(
        {
          page: page - 1,
          loading: true,
        },
        () => {
          this.getList();
        })
    }
  };
  /**
   * 获取账套列表
   */
  getCompanyList = () => {
    baseService.getSetOfBooksByTenant().then(res => {
      let list = [];
      res.data.map(item => {
        list.push({value: item.id, label: `${item.setOfBooksCode}-${item.setOfBooksName}`});
      });
      let form = this.state.searchForm;
      form[0].options = list;
      this.setState({searchForm: form});
    });
  }
  /**
   * 新建按钮
   */
  handleCreate = () => {
    this.context.router.push(this.state.newBudgetBalanceSolution.url.replace(':setOfBooksId', this.state.setOfBooksId));
  }
  /**
   * searchArea组件的事件
   */
  searchEventHandle = (event, value) => {
    if (event == 'SETOFBOOKSID') {
      this.setState({
          page: 0,
          setOfBooksId: value
        },
        () => {
          this.getList();
        });
    }
  }
  /**
   * 查询按钮
   */
  search = (values) => {
    this.setState({
      page: 0,
      searchParam: values
    }, () => {
      this.getList()
    })
  };
  /**
   * 清空按钮
   */
  clear = () => {
    this.setState({
        page: 0,
        setOfBooksId: this.props.company.setOfBooksId
      },
      () => {
        this.getList();
      });
  }

  /**
   * 渲染函数
   */
  render() {

    const {searchForm, pagination, columns, data, loading} = this.state;
    return (
      <div>
        <SearchArea searchForm={searchForm}
                    eventHandle={this.searchEventHandle}
                    submitHandle={this.search}
                    clearHandle={this.clear}/>
        <div className='table-header'>
          <div className='table-header-title'>
            {messages('common.total', {total: Number(pagination.total) == 0 ? '0' : Number(pagination.total)})}
          </div>
          <div className='table-header-buttons'>
            <Button type='primary' onClick={this.handleCreate}>{messages('common.create')}</Button>
          </div>
        </div>
        <ResizeTable
          columns={columns}
          loading={loading}
          dataSource={data}
          size='middle'
          bordered
          pagination={pagination}
          rowKey={record => record['id']}/>
      </div>
    )
  }

}

/**
 * router
 */
BudgetBalanceSolution.contextTypes = {
  router: React.PropTypes.object
};

/**
 * redux
 */
function mapStateToProps(state) {
  return {
    company: state.login.company
  }
}

export default connect(mapStateToProps)(BudgetBalanceSolution);

